<template>
  <div style="padding: 20px;" class="商品管理">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-input v-model="params.id" placeholder="商品编号" clearable style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-input v-model="params.barCode" placeholder="条码编号" clearable
        style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-select v-model="params.categoryId" placeholder="所属门店" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="无数据" value="1"></el-option>
      </el-select>
      <el-select v-model="params.categoryIdSel" placeholder="商品分类" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="展示" value="true"></el-option>
      </el-select>
      <el-input v-model="params.k" placeholder="智能搜索" clearable style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-input v-model="params.nameLike" placeholder="商品名称" clearable
        style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-input v-model="params.subNameLike" placeholder="别名" clearable
        style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-input v-model="params.type" placeholder="商品特色" clearable style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-input v-model="params.tagsLike" placeholder="标签、关键词" clearable
        style="width: 200px;margin-bottom: 10px;"></el-input>
      <el-select v-model="params.status" placeholder="上架状态" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="上架" value="0"></el-option>
        <el-option label="下架" value="1"></el-option>
      </el-select>
      <el-select v-model="params.recommendStatus" placeholder="是否推荐" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="不推荐" value="0"></el-option>
        <el-option label="推荐" value="1"></el-option>
      </el-select>
      <el-select v-model="params.vetStatus" placeholder="审核状态" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="待审核" value="0"></el-option>
        <el-option label="已审核" value="1"></el-option>
        <el-option label="审核不通过" value="2"></el-option>
      </el-select>
      <el-select v-model="params.pingtuan" placeholder="拼团状态" clearable style="width: 200px;margin-bottom: 10px;">
        <el-option label="开启拼团" value="true"></el-option>
        <el-option label="关闭拼团" value="false"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" size="small">搜索</el-button>
    </el-form>
    <div>
      <el-button type="danger" icon="el-icon-upload" size="small">批量导入</el-button>
      <el-button type="success" icon="el-icon-plus" size="small">单个发布</el-button>
    </div>
    <div style="height: 440px;overflow-y: auto;margin-bottom: 2px;">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="销售中" name="second"></el-tab-pane>
        <el-tab-pane label="已售罄" name="third"></el-tab-pane>
        <el-tab-pane label="仓库中" name="fourth"></el-tab-pane>
      </el-tabs>
      <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;">
          <el-table-column type="selection" style="width: 1rem;"></el-table-column>
          <el-table-column label="图片" prop="pic">
            <template slot-scope="scope">
              <img :src="scope.row.pic" alt="" height="80px" width="80px">
            </template>
          </el-table-column>
          <el-table-column label="编号/条形码">
            <template slot-scope="scope">
              <p>{{ scope.row.id }}</p>
              <p>-</p>
            </template>
          </el-table-column>
          <el-table-column label="门店/分类">
            <P>-</P>
            <P>-</P>
          </el-table-column>
          <el-table-column label="名称" prop="name">
          </el-table-column>
          <el-table-column label="库存/状态">
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <p>商品原价:{{ scope.row.originalPrice }}</p>
              <p>最低价格:{{ scope.row.minPrice }}</p>
              <p>砍价底价:{{ scope.row.kanjiaPrice }}</p>
              <p>团购价格:{{ scope.row.pingtuanPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column label="数据统计">
            <template slot-scope="scope">
              <p>浏览量:{{ scope.row.views }}</p>
              <p>收藏量:{{ scope.row.gotScore }}</p>
              <p>订单数:{{ scope.row.numberOrders }}</p>
              <p>销售数:{{ scope.row.numberSells }}</p>
              <p>好评数:{{ scope.row.numberGoodReputation }}</p>
            </template>
          </el-table-column>
          <el-table-column label="满意度">
            <template slot-scope="scope">
              <p>赞:{{ scope.row.usefulNumber }}</p>
              <p>踩:{{ scope.row.unusefulNumber }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-button type="success" size="small">修改类目</el-button>
      <el-button type="success" size="small">上架</el-button>
      <el-button type="warning" size="small">下架</el-button>
      <el-button type="success" size="small">推荐</el-button>
      <el-button type="warning" size="small">取消推荐</el-button>
      <el-button type="success" size="small">已审核</el-button>
      <el-button type="warning" size="small">审核不通过</el-button>
      <el-button type="danger" size="small">会员限购</el-button>
      <el-button type="danger" size="small">批量删除</el-button>
    </div>
  </div>
</template>

<script>
import { shopsList } from "@/api/merchandiseManage"
export default {
  data() {
    return {
      //input框数据
      params: {
        id: "",
        barCode: "",
        categoryId: "",
        categoryIdSel: "",
        k: "",
        nameLike: "",
        subNameLike: "",
        characteristicLike: "",
        tagsLike: "",
        status: "",
        recommendStatus: "",
        vetStatus: "",
        pingtuan: "",
      },
      activeName: 'first',
      tableData: [],
    }
  },
  methods: {
    async getShops() {
      let { data: res } = await shopsList()
      console.log(res.result);
      this.tableData = res.result
    },
    handleClick(tab, event) {
        console.log(tab, event);
      }
  },
  mounted() {
    this.getShops()
  },
}
</script>